<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {query} from '@/api/account/account'
import {ElMessage} from "element-plus";
import { getUser } from "@/utils/session.js";
//声明属性
const props = defineProps({
  "visible": {
    type: Boolean,
    default: false
  }
})
//声明事件
const emits = defineEmits(["close", "choose"])
//数据
const tableData = ref([])

//查询类别树
async function init() {
  let data = {
    "eid":getUser().eid
  }
  let res = await query(data)
  if (res.code == 200) {
    tableData.value = res.data;
  }
}

//声明同名引用
const accountList = ref(null);

//选择
function choose() {
  let rows = accountList.value.getSelectionRows();
  if (rows.length == 0) {
    ElMessage({
      message: '请选择账户',
      type: 'warning'
    })
    return
  }
  //将选中的商品传给父组件
  emits("choose", rows)
  //关闭
  cls()
}

//关闭窗口
function cls() {
  //抛出自定义事件
  emits("close");
}

//生命周期-----------
onMounted(() => {
  init()
})
</script>

<template>
  <div>
    <el-dialog :model-value="visible" :close-on-click-modal="false" title="账户选择" width="608" @close="cls">
      <!--  工具条  -->
      <div class="toolbar">
        <el-button type="primary" size="small" @click="choose">确定</el-button>
        <el-button size="small" @click="cls">取消</el-button>
      </div>
      <!--    商品列表    -->
      <el-table :data="tableData" style="width: 100%" border stripe ref="accountList">
        <el-table-column type="selection" width="55" header-align="center" align="center"/>
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column prop="code" label="编号" width="120" header-align="center" align="center"/>
        <el-table-column prop="name" label="账户名称" width="120" header-align="center" align="center"/>
        <el-table-column prop="nowMoney" label="当前余额" width="120" header-align="center" align="center"/>
        <el-table-column prop="type" label="账户类别" width="106" header-align="center" align="center">
          <template v-slot="{row}">
            <span v-if="row.type==1">现金</span>
            <span v-else-if="row.type==2">银行卡</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped>
.toolbar {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
}

.tree {
  border: #ebeef5 1px solid;
}
</style>

